<!--友情链接-->
<template>
  <div class="friend-link card-margin">
    <el-card class="box-card" shadow="hover">
      <div slot="header" class="link-title">
        <span>友情链接</span>
      </div>
      <div class="text item" v-for="item in friend_link" :key="item">
        <el-link :href="item.url" target="_blank" :underline="false"
          ><el-button round>{{ item.name }}</el-button></el-link
        >
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      friend_link: [
        {
          url: "https://www.baidu.com",
          name: "百度",
        },
        {
          url: "https://www.csdn.net/",
          name: "CSDN",
        },
        {
          url: "https://gitee.com/",
          name: "码云",
        },
      ],
    };
  },
};
</script>
<style scoped>
.item {
  display: inline-block;
}
.friend-link {
  width: 400px;
  height: 400px;
}

.card-margin {
  margin: 0 0 15px 20px;
}

.box-card .item:hover {
  color: #409eff;
  cursor: pointer;
}

.box-card span {
  font-weight: bold;
}
.card-padding {
  padding: 0 0 0 20px;
}
.card-icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

.el-button {
  margin: 10px;
}
.link-title {
  border-left: 3px solid #f56c6c;
  padding-left: 5px;
  font-size: 18px;
  text-align: left;
}
</style>
